import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import './List.css'
class List extends Component {
    state = {
        info: [
            {
                meun: '主页',
                iconfont: "iconfont icon-zhuye",
                id: 1,
                path: '/index'
            },
            {
                meun: '探索',
                iconfont: "iconfont icon-hashjinghao",
                id: 2,
                path: '/explore'
            },
            {
                meun: '提醒',
                iconfont: "iconfont icon-tixing",
                id: 3,
                path: '/notice'
            },
            {
                meun: '私信',
                iconfont: "iconfont icon-xinfeng",
                id: 4,
                path: '/message'
            },
            {
                meun: '收藏',
                iconfont: "iconfont icon-shuqian",
                id: 5,
                path: '/like'
            },
            {
                meun: '我的',
                iconfont: "iconfont icon-wode",
                id: 6,
                path: '/mine'
            }
        ], //渲染菜单的数据
        userInfo: {
            img: 'https://img1.baidu.com/it/u=793269991,2224346596&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            greetings: '早上好',
            text: '苦逼的开发者'
        } //用户头像数据
    }
    
    componentDidMount(){
        const res = JSON.parse(localStorage.getItem('usersMessage'))
        this.setState({
            userInfo:{
            img: res==null?"":res.avater,
            greetings: '早上好',
            text: res==null?"":res.nickname,
            }
        })
    }

    // 渲染菜单的函数
    renderMenu() {
        return this.state.info.map(item => (
            <div className="item" key={item.id} onClick={()=> this.props.history.push(`${item.path}`)}>
                <div className="light"></div>
                <div className="licon"><span className={item.iconfont}></span></div>
                <div className="con">{item.meun}</div>
                <div className="ricon"></div>
            </div>
        ))
    }
    renderUser() {
        const { img, greetings, text } = this.state.userInfo
        return (
            <div className="icon" >
                <div className="icon-img" onClick={()=> this.props.history.push('/mine')}><img src={img} alt="" /></div>
                <div className="icon-con">
                    <p >{greetings}</p>
                    <h2 className='ppp'>{text}</h2>
                </div>
            </div>
        )
    }

    goLogin = () => {
        this.props.history.push('/login')
    }

    // 去mine
    goMine = () => {
        this.props.history.push('/mine')
    }

    render() {
        return (
            <div className='wrap'>
                <div className="nav">
                    {/* <!--个人用户信息、头像--> */}
                    <div>
                        {this.renderUser()}
                        {/* 渲染头像 */}
                    </div>
                    <div className="line"></div>
                    <div className="title">
                        <p>Menu</p>
                    </div>
                    <div className="menu">
                        {this.renderMenu()}
                        
                        {/* 渲染菜单 */}
                    </div>
                    <div className="line"></div>
                    <div className="title">
                        <p>Setting</p>
                    </div>

                    <div className="serve">
                        <div className="item">
                            <div className="licon"><span className="iconfont icon-tuichu"></span></div>
                            <div className="con" onClick={this.goLogin}>登出</div>
                            <div className="ricon"><span className="iconfont icon-caidan1"></span></div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(List);
